<template>
    <div class="container">
        <div>
            <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
        </div>
        <div>
            <van-swipe-cell>
                <van-cell title="头像" is-link arrow-direction="right" class="myorder" style="padding: 0 16px;"
                    @click="changeAvatar">
                    <div>
                        <img :src="showAvatar" alt=""
                            style="width: 50px;height: 50px;border-radius: 5px;margin-top: 10px">
                    </div>
                </van-cell>
                <van-cell ref="phoneCell" title="手机号" is-link arrow-direction="right" class="myorder">
                    <div>{{ showPhone }}</div>
                </van-cell>
                <van-cell ref="nicknameCell" title="昵称" is-link arrow-direction="right" class="myorder"
                    @click="() => changeOtherInfo('nickname')">
                    <div>{{ showNickname }}</div>
                </van-cell>
                <van-cell ref="addressCell" title="地址" is-link arrow-direction="right" class="myorder"
                    @click="() => changeOtherInfo('address')">
                    <div>{{ showAddress }}</div>
                </van-cell>
            </van-swipe-cell>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, computed, watch } from 'vue';
import http from '@/http';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
const route = useRoute();
const router = useRouter();
let originPhone = ref(localStorage.getItem('reginame'));
let originNickname = ref('');
let originAddress = ref('');
let avatar = ref('');
const phoneCell = ref(null);
const nicknameCell = ref(null);
const addressCell = ref(null);

function changeAvatar() {
    router.push('/changeuseravatar')
}

function changeOtherInfo(cellType) {
    let titleToPass;
    if (cellType === 'nickname') {
        titleToPass = nicknameCell.value.title;
    } else if (cellType === 'address') {
        titleToPass = addressCell.value.title;
    }
    router.push({
        path: '/changeotherinfo',
        query: {
            titleRoute: titleToPass,
        }
    });
}

const queryAllUserInfo = () => {
    http.get('/patient/register_login/', {
        params: {
            phone: originPhone.value,
        }
    })
        .then(response => {
            console.log('请求成功', response.data);
            originNickname.value = response.data.nickname;
            originAddress.value = response.data.address;
            avatar.value = response.data.avatar;
        })
        .catch(error => {
            console.error('请求失败', error);
        });
}
onMounted(() => {
    queryAllUserInfo();
})

const receivedNewPhone = route.query.newPhone || '';
const receivedNewNickname = route.query.newNickname || '';
const receivedNewAddress = route.query.newAddress || '';
const receivedNewAvatar = route.query.new_avatar || '';

const showPhone = computed(() => receivedNewPhone && receivedNewPhone !== originPhone.value ? receivedNewPhone : originPhone.value);
const showNickname = computed(() => receivedNewNickname && receivedNewNickname !== originNickname.value ? receivedNewNickname : originNickname.value);
const showAddress = computed(() => receivedNewAddress && receivedNewAddress !== originAddress.value ? receivedNewAddress : originAddress.value);
const showAvatar = computed(() => receivedNewAvatar && receivedNewAvatar !== avatar.value ? receivedNewAvatar : avatar.value);

watch([route], () => {
    const newReceivedNewPhone = route.query.newPhone || '';
    const newReceivedNewNickname = route.query.newNickname || '';
    const newReceivedNewAddress = route.query.newAddress || '';
    const newReceivedNewAvatar = route.query.new_avatar || '';
    if (newReceivedNewPhone && newReceivedNewPhone !== originPhone.value) {
        originPhone.value = newReceivedNewPhone;
    }
    if (newReceivedNewNickname && newReceivedNewNickname !== originNickname.value) {
        originNickname.value = newReceivedNewNickname;
    }
    if (newReceivedNewAddress && newReceivedNewAddress !== originAddress.value) {
        originAddress.value = newReceivedNewAddress;
    }
    if (newReceivedNewAvatar && newReceivedNewAvatar !== avatar.value) {
        avatar.value = newReceivedNewAvatar;
    }
}, { immediate: true, deep: true });

const onClickLeft = () => {
    router.push('/mine')
};
</script>

<style scoped>
.container {
    background-color: #faf8f8;
    height: 200vh;
}

.myorder {
    display: flex;
    align-items: center;
}
</style>